<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景区首页</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
    <link rel="stylesheet" href="../styles.css"> <!-- Link to the main styles -->
</head>
<body class="bg-gray-100 p-4">
    <h2 class="text-xl font-bold mb-4 text-center text-blue-600">景区首页</h2>

    <!-- Banner Section -->
    <div class="mb-4 rounded-lg overflow-hidden shadow-md">
        <img src="https://via.placeholder.com/600x200?text=Scenic+Spot+Banner" alt="景区横幅" class="w-full h-auto">
        <!-- Replace with a real image URL -->
    </div>

    <!-- Quick Actions -->
    <div class="grid grid-cols-4 gap-4 text-center mb-6">
        <div>
            <a href="#" class="block bg-blue-500 text-white p-3 rounded-full shadow-md hover:bg-blue-600">
                <i class="fas fa-map-marked-alt fa-lg"></i>
            </a>
            <span class="text-xs mt-1 block">地图导览</span>
        </div>
        <div>
            <a href="#" class="block bg-green-500 text-white p-3 rounded-full shadow-md hover:bg-green-600">
                <i class="fas fa-list-ul fa-lg"></i>
            </a>
            <span class="text-xs mt-1 block">景点列表</span>
        </div>
        <div>
            <a href="#" class="block bg-yellow-500 text-white p-3 rounded-full shadow-md hover:bg-yellow-600">
                <i class="fas fa-microphone-alt fa-lg"></i>
            </a>
            <span class="text-xs mt-1 block">语音讲解</span>
        </div>
        <div>
            <a href="#" class="block bg-purple-500 text-white p-3 rounded-full shadow-md hover:bg-purple-600">
                <i class="fas fa-info-circle fa-lg"></i>
            </a>
            <span class="text-xs mt-1 block">景区资讯</span>
        </div>
    </div>

    <!-- Recommended Attractions -->
    <h3 class="text-lg font-semibold mb-3 text-gray-700">推荐景点</h3>
    <div class="grid grid-cols-2 gap-4">
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <img src="https://via.placeholder.com/300x150?text=Attraction+1" alt="景点1" class="w-full h-24 object-cover">
            <!-- Replace with real image -->
            <div class="p-3">
                <h4 class="font-bold text-sm">景点名称 A</h4>
                <p class="text-xs text-gray-600">一句话简介...</p>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <img src="https://via.placeholder.com/300x150?text=Attraction+2" alt="景点2" class="w-full h-24 object-cover">
            <!-- Replace with real image -->
            <div class="p-3">
                <h4 class="font-bold text-sm">景点名称 B</h4>
                <p class="text-xs text-gray-600">一句话简介...</p>
            </div>
        </div>
        <!-- Add more recommended attractions -->
    </div>

</body>
</html>